<template>
  <PageContainer title="提现管理">
    <!-- 搜索筛选区域 -->
    <SearchForm v-model="searchForm" @search="handleSearch" @reset="handleReset">
      <el-form-item label="用户筛选">
        <el-input
          v-model="searchForm.userName"
          placeholder="请输入用户名或手机号"
          clearable
        />
      </el-form-item>
      <el-form-item label="提现状态">
        <el-select
          v-model="searchForm.status"
          placeholder="请选择提现状态"
          clearable
        >
          <el-option label="待审核" value="pending" />
          <el-option label="审核通过" value="approved" />
          <el-option label="审核驳回" value="rejected" />
          <el-option label="处理中" value="processing" />
          <el-option label="提现成功" value="success" />
          <el-option label="提现失败" value="failed" />
        </el-select>
      </el-form-item>
      <el-form-item label="提现金额范围">
        <div class="amount-range">
          <el-input-number
            v-model="searchForm.minAmount"
            :min="0"
            :max="10000"
            :precision="2"
            placeholder="最小金额"
            style="width: 120px"
          />
          <span style="margin: 0 8px">-</span>
          <el-input-number
            v-model="searchForm.maxAmount"
            :min="0"
            :max="10000"
            :precision="2"
            placeholder="最大金额"
            style="width: 120px"
          />
          <span style="margin-left: 8px; color: #909399">元</span>
        </div>
      </el-form-item>
      <el-form-item label="申请时间">
        <el-date-picker
          v-model="searchForm.dateRange"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>
    </SearchForm>

    <!-- 统计卡片 -->
    <div class="stats-grid">
      <StatCard
        :icon="Money"
        icon-bg="#67C23A"
        :value="`¥${withdrawalStats.totalPending}`"
        label="待审核金额"
        :trend="withdrawalStats.pendingTrend"
      />
      <StatCard
        :icon="CreditCard"
        icon-bg="#E6A23C"
        :value="`¥${withdrawalStats.totalApproved}`"
        label="已审核金额"
        :trend="withdrawalStats.approvedTrend"
      />
      <StatCard
        :icon="Wallet"
        icon-bg="#409EFF"
        :value="`${withdrawalStats.totalCount}`"
        label="提现申请数"
        :trend="withdrawalStats.countTrend"
      />
      <StatCard
        :icon="DocumentCopy"
        icon-bg="#909399"
        :value="`${withdrawalStats.successRate}`"
        label="成功率"
        :trend="withdrawalStats.rateTrend"
      />
    </div>

    <!-- 操作按钮区域 -->
    <div class="action-bar">
      <div class="action-left">
        <el-button
          type="primary"
          :disabled="!selectedRows.length"
          @click="handleBatchApprove"
        >
          <el-icon><Check /></el-icon>
          批量通过
        </el-button>
        <el-button
          type="warning"
          :disabled="!selectedRows.length"
          @click="handleBatchReject"
        >
          <el-icon><Close /></el-icon>
          批量驳回
        </el-button>
        <el-button
          type="success"
          @click="handleExport"
        >
          <el-icon><Download /></el-icon>
          批量导出
        </el-button>
        <el-button
          type="info"
          @click="handleConfig"
        >
          <el-icon><Setting /></el-icon>
          提现配置
        </el-button>
      </div>
      <div class="action-right">
        <el-button
          type="info"
          @click="loadWithdrawalList"
        >
          <el-icon><Refresh /></el-icon>
          刷新
        </el-button>
      </div>
    </div>

    <!-- 提现申请表格 -->
    <DataTable
      :data="withdrawalList"
      :loading="loading"
      :pagination="pagination"
      @page-change="handlePageChange"
      @size-change="handleSizeChange"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="申请ID" width="100" />
      <el-table-column prop="withdrawalNo" label="提现单号" width="180" />
      <el-table-column label="用户信息" width="200">
        <template #default="{ row }">
          <div class="user-info">
            <div class="user-name">{{ row.userName }}</div>
            <div class="user-phone">{{ row.userPhone }}</div>
            <div class="user-id">ID: {{ row.userId }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="钱包余额" width="120">
        <template #default="{ row }">
          <span class="balance-amount">¥{{ row.walletBalance }}</span>
        </template>
      </el-table-column>
      <el-table-column label="提现金额" width="120" sortable>
        <template #default="{ row }">
          <span class="withdrawal-amount">¥{{ row.amount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="提现状态" width="100">
        <template #default="{ row }">
          <el-tag :type="getStatusTag(row.status)">
            {{ getStatusText(row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="支付方式" width="120">
        <template #default="{ row }">
          <div class="payment-method">
            <el-icon>
              <component :is="getPaymentIcon(row.paymentMethod)" />
            </el-icon>
            <span>{{ getPaymentText(row.paymentMethod) }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="申请时间" width="180" sortable>
        <template #default="{ row }">
          {{ formatDateTime(row.createdAt) }}
        </template>
      </el-table-column>
      <el-table-column label="审核时间" width="180">
        <template #default="{ row }">
          {{ row.reviewedAt ? formatDateTime(row.reviewedAt) : '-' }}
        </template>
      </el-table-column>
      <el-table-column label="审核人员" width="120">
        <template #default="{ row }">
          {{ row.reviewedBy || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" fixed="right">
        <template #default="{ row }">
          <el-button
            v-if="row.status === 'pending'"
            type="success"
            size="small"
            @click="handleApprove(row)"
          >
            通过
          </el-button>
          <el-button
            v-if="row.status === 'pending'"
            type="danger"
            size="small"
            @click="handleReject(row)"
          >
            驳回
          </el-button>
          <el-button
            type="primary"
            size="small"
            @click="handleViewDetail(row)"
          >
            详情
          </el-button>
          <el-dropdown @command="(command: string) => handleMoreAction(command, row)">
            <el-button type="text" size="small">
              更多<el-icon><ArrowDown /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="view-user">用户档案</el-dropdown-item>
                <el-dropdown-item command="transaction-history">交易记录</el-dropdown-item>
                <el-dropdown-item
                  command="re-process"
                  :disabled="!['failed', 'rejected'].includes(row.status)"
                  divided
                >
                  重新处理
                </el-dropdown-item>
                <el-dropdown-item
                  command="cancel"
                  :disabled="row.status !== 'pending'"
                >
                  取消申请
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-table-column>
    </DataTable>

    <!-- 提现详情对话框 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="提现申请详情"
      width="70%"
    >
      <div v-if="currentWithdrawal" class="withdrawal-detail">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-descriptions title="基本信息" :column="1" border>
              <el-descriptions-item label="申请ID">
                {{ currentWithdrawal.id }}
              </el-descriptions-item>
              <el-descriptions-item label="提现单号">
                {{ currentWithdrawal.withdrawalNo }}
              </el-descriptions-item>
              <el-descriptions-item label="用户姓名">
                {{ currentWithdrawal.userName }}
              </el-descriptions-item>
              <el-descriptions-item label="用户手机">
                {{ currentWithdrawal.userPhone }}
              </el-descriptions-item>
              <el-descriptions-item label="用户ID">
                {{ currentWithdrawal.userId }}
              </el-descriptions-item>
              <el-descriptions-item label="钱包余额">
                ¥{{ currentWithdrawal.walletBalance }}
              </el-descriptions-item>
              <el-descriptions-item label="提现金额">
                <span class="withdrawal-amount">¥{{ currentWithdrawal.amount }}</span>
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
          <el-col :span="12">
            <el-descriptions title="提现信息" :column="1" border>
              <el-descriptions-item label="提现状态">
                <el-tag :type="getStatusTag(currentWithdrawal.status)">
                  {{ getStatusText(currentWithdrawal.status) }}
                </el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="支付方式">
                <div class="payment-method">
                  <el-icon>
                    <component :is="getPaymentIcon(currentWithdrawal.paymentMethod)" />
                  </el-icon>
                  <span>{{ getPaymentText(currentWithdrawal.paymentMethod) }}</span>
                </div>
              </el-descriptions-item>
              <el-descriptions-item label="收款账户">
                {{ currentWithdrawal.receivingAccount || '-' }}
              </el-descriptions-item>
              <el-descriptions-item label="申请时间">
                {{ formatDateTime(currentWithdrawal.createdAt) }}
              </el-descriptions-item>
              <el-descriptions-item label="审核时间">
                {{ currentWithdrawal.reviewedAt ? formatDateTime(currentWithdrawal.reviewedAt) : '-' }}
              </el-descriptions-item>
              <el-descriptions-item label="审核人员">
                {{ currentWithdrawal.reviewedBy || '-' }}
              </el-descriptions-item>
              <el-descriptions-item label="处理时间">
                {{ currentWithdrawal.processedAt ? formatDateTime(currentWithdrawal.processedAt) : '-' }}
              </el-descriptions-item>
              <el-descriptions-item label="审核备注">
                {{ currentWithdrawal.reviewRemark || '-' }}
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>

        <!-- 审核记录 -->
        <div class="review-history" style="margin-top: 20px;">
          <h4>审核记录</h4>
          <el-timeline>
            <el-timeline-item
              v-for="(record, index) in currentWithdrawal.reviewRecords"
              :key="index"
              :timestamp="formatDateTime(record.createdAt)"
              :type="getRecordType(record.action)"
            >
              <div class="record-content">
                <div class="record-action">{{ record.actionText }}</div>
                <div class="record-operator">操作人：{{ record.operator }}</div>
                <div v-if="record.remark" class="record-remark">备注：{{ record.remark }}</div>
              </div>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </el-dialog>

    <!-- 提现配置对话框 -->
    <el-dialog
      v-model="configDialogVisible"
      title="提现配置"
      width="500px"
      :close-on-click-modal="false"
    >
      <el-form
        ref="configFormRef"
        :model="configForm"
        :rules="configRules"
        label-width="180px"
      >
        <el-form-item label="自动审核时间(小时)" prop="autoApproveHours">
          <el-input-number
            v-model="configForm.autoApproveHours"
            :min="0"
            :max="168"
            :precision="0"
            placeholder="请输入小时数"
          />
          <span style="margin-left: 8px; color: #909399">小时</span>
          <div style="font-size: 12px; color: #909399; margin-top: 4px;">
            设置为0表示关闭自动审核功能
          </div>
        </el-form-item>
        <el-form-item label="单次提现最小金额" prop="minWithdrawalAmount">
          <el-input-number
            v-model="configForm.minWithdrawalAmount"
            :min="1"
            :max="1000"
            :precision="2"
            placeholder="请输入最小金额"
          />
          <span style="margin-left: 8px; color: #909399">元</span>
        </el-form-item>
        <el-form-item label="单次提现最大金额" prop="maxWithdrawalAmount">
          <el-input-number
            v-model="configForm.maxWithdrawalAmount"
            :min="1"
            :max="10000"
            :precision="2"
            placeholder="请输入最大金额"
          />
          <span style="margin-left: 8px; color: #909399">元</span>
        </el-form-item>
        <el-form-item label="每日提现次数限制" prop="dailyLimit">
          <el-input-number
            v-model="configForm.dailyLimit"
            :min="1"
            :max="10"
            :precision="0"
            placeholder="请输入次数限制"
          />
          <span style="margin-left: 8px; color: #909399">次</span>
        </el-form-item>
        <el-form-item label="提现手续费率" prop="feeRate">
          <el-input-number
            v-model="configForm.feeRate"
            :min="0"
            :max="10"
            :precision="2"
            placeholder="请输入手续费率"
          />
          <span style="margin-left: 8px; color: #909399">%</span>
        </el-form-item>
        <el-form-item label="最低手续费" prop="minFee">
          <el-input-number
            v-model="configForm.minFee"
            :min="0"
            :max="10"
            :precision="2"
            placeholder="请输入最低手续费"
          />
          <span style="margin-left: 8px; color: #909399">元</span>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="configDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleConfigSubmit" :loading="submitting">
          保存配置
        </el-button>
      </template>
    </el-dialog>
  </PageContainer>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
import {
  Money,
  CreditCard,
  Wallet,
  DocumentCopy,
  Check,
  Close,
  Download,
  Setting,
  Refresh,
  ArrowDown
} from '@element-plus/icons-vue'
import PageContainer from '@/components/PageContainer.vue'
import SearchForm from '@/components/SearchForm.vue'
import DataTable from '@/components/DataTable.vue'
import StatCard from '@/components/StatCard.vue'
import { formatDateTime } from '@/utils'

const loading = ref(false)
const submitting = ref(false)
const detailDialogVisible = ref(false)
const configDialogVisible = ref(false)
const currentWithdrawal = ref<any>(null)
const selectedRows = ref<any[]>([])
const configFormRef = ref<FormInstance>()

// 搜索表单
const searchForm = reactive({
  userName: '',
  status: '',
  minAmount: null,
  maxAmount: null,
  dateRange: []
})

// 分页信息
const pagination = reactive({
  page: 1,
  size: 20,
  total: 0
})

// 提现统计
const withdrawalStats = reactive({
  totalPending: '15,680.50',
  pendingTrend: '+12.5%',
  totalApproved: '89,560.20',
  approvedTrend: '+8.3%',
  totalCount: '1,256',
  countTrend: '+15.2%',
  successRate: '98.5%',
  rateTrend: '+2.1%'
})

// 提现申请列表
const withdrawalList = ref<any[]>([])

// 配置表单
const configForm = reactive({
  autoApproveHours: 24,
  minWithdrawalAmount: 1,
  maxWithdrawalAmount: 5000,
  dailyLimit: 3,
  feeRate: 0.5,
  minFee: 1
})

// 配置验证规则
const configRules: FormRules = {
  autoApproveHours: [
    { type: 'number', min: 0, max: 168, message: '自动审核时间范围在 0 到 168 小时', trigger: 'blur' }
  ],
  minWithdrawalAmount: [
    { type: 'number', min: 1, max: 1000, message: '最小提现金额范围在 1 到 1000 元', trigger: 'blur' }
  ],
  maxWithdrawalAmount: [
    { type: 'number', min: 1, max: 10000, message: '最大提现金额范围在 1 到 10000 元', trigger: 'blur' }
  ],
  dailyLimit: [
    { type: 'number', min: 1, max: 10, message: '每日提现次数范围在 1 到 10 次', trigger: 'blur' }
  ],
  feeRate: [
    { type: 'number', min: 0, max: 10, message: '手续费率范围在 0 到 10%', trigger: 'blur' }
  ],
  minFee: [
    { type: 'number', min: 0, max: 10, message: '最低手续费范围在 0 到 10 元', trigger: 'blur' }
  ]
}

// 获取状态标签
const getStatusTag = (status: string) => {
  switch (status) {
    case 'pending':
      return 'warning'
    case 'approved':
      return 'success'
    case 'rejected':
      return 'danger'
    case 'processing':
      return 'primary'
    case 'success':
      return 'success'
    case 'failed':
      return 'danger'
    default:
      return 'info'
  }
}

// 获取状态文本
const getStatusText = (status: string) => {
  switch (status) {
    case 'pending':
      return '待审核'
    case 'approved':
      return '审核通过'
    case 'rejected':
      return '审核驳回'
    case 'processing':
      return '处理中'
    case 'success':
      return '提现成功'
    case 'failed':
      return '提现失败'
    default:
      return '未知状态'
  }
}

// 获取支付方式图标
const getPaymentIcon = (method: string) => {
  switch (method) {
    case 'wechat':
      return 'ChatDotRound'
    case 'alipay':
      return 'Money'
    case 'bank':
      return 'CreditCard'
    default:
      return 'Wallet'
  }
}

// 获取支付方式文本
const getPaymentText = (method: string) => {
  switch (method) {
    case 'wechat':
      return '微信支付'
    case 'alipay':
      return '支付宝'
    case 'bank':
      return '银行卡'
    default:
      return '其他'
  }
}

// 获取记录类型
const getRecordType = (action: string) => {
  switch (action) {
    case 'apply':
      return 'primary'
    case 'approve':
      return 'success'
    case 'reject':
      return 'danger'
    case 'process':
      return 'warning'
    default:
      return 'primary'
  }
}

// 加载提现申请列表
const loadWithdrawalList = async () => {
  loading.value = true
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 500))

    // 演示数据
    withdrawalList.value = [
      {
        id: 1,
        withdrawalNo: 'WD202401150001',
        userId: 1001,
        userName: '张三',
        userPhone: '13800138001',
        walletBalance: 156.80,
        amount: 100.00,
        status: 'pending',
        paymentMethod: 'wechat',
        receivingAccount: 'wx_zhangsan',
        createdAt: '2024-01-15 10:30:00',
        reviewedAt: null,
        reviewedBy: null
      },
      {
        id: 2,
        withdrawalNo: 'WD202401150002',
        userId: 1002,
        userName: '李四',
        userPhone: '13800138002',
        walletBalance: 289.50,
        amount: 200.00,
        status: 'approved',
        paymentMethod: 'alipay',
        receivingAccount: 'alipay_lisi@example.com',
        createdAt: '2024-01-15 09:15:00',
        reviewedAt: '2024-01-15 10:00:00',
        reviewedBy: '管理员'
      },
      {
        id: 3,
        withdrawalNo: 'WD202401150003',
        userId: 1003,
        userName: '王五',
        userPhone: '13800138003',
        walletBalance: 156.80,
        amount: 50.00,
        status: 'rejected',
        paymentMethod: 'bank',
        receivingAccount: '6222****1234',
        createdAt: '2024-01-14 16:45:00',
        reviewedAt: '2024-01-14 17:30:00',
        reviewedBy: '审核员',
        reviewRemark: '提现金额低于最低限制'
      },
      {
        id: 4,
        withdrawalNo: 'WD202401150004',
        userId: 1004,
        userName: '赵六',
        userPhone: '13800138004',
        walletBalance: 500.00,
        amount: 300.00,
        status: 'processing',
        paymentMethod: 'wechat',
        receivingAccount: 'wx_zhaoliu',
        createdAt: '2024-01-14 14:20:00',
        reviewedAt: '2024-01-14 15:00:00',
        reviewedBy: '管理员'
      },
      {
        id: 5,
        withdrawalNo: 'WD202401150005',
        userId: 1005,
        userName: '钱七',
        userPhone: '13800138005',
        walletBalance: 800.00,
        amount: 500.00,
        status: 'success',
        paymentMethod: 'alipay',
        receivingAccount: 'alipay_qianqi@example.com',
        createdAt: '2024-01-13 11:10:00',
        reviewedAt: '2024-01-13 11:30:00',
        reviewedBy: '审核员',
        processedAt: '2024-01-13 14:00:00'
      }
    ]

    pagination.total = withdrawalList.value.length
  } catch (error) {
    ElMessage.error('加载提现申请列表失败')
  } finally {
    loading.value = false
  }
}

// 搜索处理
const handleSearch = () => {
  pagination.page = 1
  loadWithdrawalList()
}

// 重置处理
const handleReset = () => {
  Object.assign(searchForm, {
    userName: '',
    status: '',
    minAmount: null,
    maxAmount: null,
    dateRange: []
  })
  pagination.page = 1
  loadWithdrawalList()
}

// 分页处理
const handlePageChange = (page: number) => {
  pagination.page = page
  loadWithdrawalList()
}

const handleSizeChange = (size: number) => {
  pagination.size = size
  pagination.page = 1
  loadWithdrawalList()
}

// 选择处理
const handleSelectionChange = (selection: any[]) => {
  selectedRows.value = selection
}

// 查看详情
const handleViewDetail = async (row: any) => {
  // 模拟获取提现详细信息
  currentWithdrawal.value = {
    ...row,
    reviewRecords: [
      {
        action: 'apply',
        actionText: '提交提现申请',
        operator: '用户',
        createdAt: row.createdAt,
        remark: `申请提现¥${row.amount}`
      },
      ...(row.reviewedAt ? [{
        action: row.status === 'approved' ? 'approve' : 'reject',
        actionText: row.status === 'approved' ? '审核通过' : '审核驳回',
        operator: row.reviewedBy,
        createdAt: row.reviewedAt,
        remark: row.reviewRemark || '系统审核'
      }] : []),
      ...(row.processedAt ? [{
        action: 'process',
        actionText: '提现处理完成',
        operator: '系统',
        createdAt: row.processedAt,
        remark: '资金已到账'
      }] : [])
    ]
  }
  detailDialogVisible.value = true
}

// 通过申请
const handleApprove = async (row: any) => {
  try {
    await ElMessageBox.confirm(
      '确定要通过这笔提现申请吗？',
      '通过申请',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    // 调用通过申请API
    ElMessage.success('申请已通过')
    loadWithdrawalList()
  } catch (error) {
    // 用户取消
  }
}

// 驳回申请
const handleReject = async (row: any) => {
  try {
    await ElMessageBox.prompt('请输入驳回原因', '驳回申请', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      inputPattern: /.+/,
      inputErrorMessage: '驳回原因不能为空'
    }).then(({ value }) => {
      // 调用驳回申请API
      ElMessage.success('申请已驳回')
      loadWithdrawalList()
    })
  } catch (error) {
    // 用户取消
  }
}

// 批量通过
const handleBatchApprove = async () => {
  try {
    await ElMessageBox.confirm(
      `确定要通过选中的 ${selectedRows.value.length} 笔提现申请吗？`,
      '批量通过',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    // 调用批量通过API
    ElMessage.success('批量通过成功')
    loadWithdrawalList()
  } catch (error) {
    // 用户取消
  }
}

// 批量驳回
const handleBatchReject = async () => {
  try {
    await ElMessageBox.prompt('请输入驳回原因', '批量驳回', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      inputPattern: /.+/,
      inputErrorMessage: '驳回原因不能为空'
    }).then(({ value }) => {
      // 调用批量驳回API
      ElMessage.success('批量驳回成功')
      loadWithdrawalList()
    })
  } catch (error) {
    // 用户取消
  }
}

// 导出数据
const handleExport = () => {
  ElMessage.info('导出功能开发中...')
}

// 配置管理
const handleConfig = () => {
  configDialogVisible.value = true
}

// 配置提交
const handleConfigSubmit = async () => {
  if (!configFormRef.value) return

  try {
    await configFormRef.value.validate()
    submitting.value = true

    // 调用保存配置API
    ElMessage.success('配置保存成功')
    configDialogVisible.value = false
  } catch (error) {
    ElMessage.error('配置保存失败')
  } finally {
    submitting.value = false
  }
}

// 更多操作
const handleMoreAction = (command: string, row: any) => {
  switch (command) {
    case 'view-user':
      ElMessage.info('查看用户档案功能开发中...')
      break
    case 'transaction-history':
      ElMessage.info('查看交易记录功能开发中...')
      break
    case 're-process':
      ElMessage.info('重新处理功能开发中...')
      break
    case 'cancel':
      ElMessage.info('取消申请功能开发中...')
      break
  }
}

onMounted(() => {
  loadWithdrawalList()
})
</script>

<style lang="scss" scoped>
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 16px 20px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

  .action-left,
  .action-right {
    display: flex;
    gap: 12px;
  }
}

.amount-range {
  display: flex;
  align-items: center;
}

.user-info {
  .user-name {
    font-weight: 600;
    margin-bottom: 4px;
  }

  .user-phone {
    font-size: 12px;
    color: #909399;
    margin-bottom: 4px;
  }

  .user-id {
    font-size: 12px;
    color: #909399;
  }
}

.balance-amount {
  color: #409EFF;
  font-weight: 600;
}

.withdrawal-amount {
  color: #E6A23C;
  font-weight: 600;
}

.payment-method {
  display: flex;
  align-items: center;
  gap: 4px;
}

.text-muted {
  color: #909399;
}

.withdrawal-detail {
  .review-history {
    h4 {
      margin-bottom: 16px;
      color: #303133;
    }

    .record-content {
      .record-action {
        font-weight: 600;
        margin-bottom: 4px;
      }

      .record-operator {
        font-size: 12px;
        color: #909399;
        margin-bottom: 4px;
      }

      .record-remark {
        font-size: 12px;
        color: #606266;
      }
    }
  }
}

@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .action-bar {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;

    .action-left,
    .action-right {
      justify-content: center;
    }
  }

  .amount-range {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
}
</style>
